<template>
  <div>
    <el-table border style="width: 100%" :data="record">
      <el-table-column label="序号" type="index"> </el-table-column>
      <el-table-column label="名称" prop="skuName" width="width">
      </el-table-column>
      <el-table-column label="描述" prop="skuDesc" width="width">
      </el-table-column>
      <el-table-column label="默认图片" width="120">
        <template slot-scope="{ row, $index }">
          <img :src="row.skuDefaultImg" style="width: 100%; height: 100%" />
        </template>
      </el-table-column>
      <el-table-column label="重量" prop="weight" width="80"> </el-table-column>
      <el-table-column label="价格" prop="price" width="80"> </el-table-column>
      <el-table-column label="操作" width="width">
        <template slot-scope="{ row, $index }">
          <el-button
            @click="sale(row)"
            type="success"
            title="上架"
            icon="el-icon-sort-up"
            size="mini"
            v-if="row.isSale === 0"
          ></el-button>
          <el-button
            @click="cancel(row)"
            type="success"
            title="下架"
            icon="el-icon-sort-down"
            size="mini"
            v-else
          ></el-button>
          <el-button
            @click="edit"
            type="primary"
            title="编辑"
            icon="el-icon-edit"
            size="mini"
          ></el-button>
          <el-button
            @click="getSkuInfo(row)"
            type="info"
            title="查看详情"
            icon="el-icon-info"
            size="mini"
          ></el-button>
          <el-button
            @click="deleteSku"
            type="danger"
            title="删除"
            icon="el-icon-delete"
            size="mini"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <div class="block" style="text-align: center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        style="text-align: center"
        :current-page="page"
        :page-sizes="[3, 5, 10]"
        :page-size="limit"
        layout="prev, pager, next, jumper,->,sizes,total"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 侧边抽屉 -->
    <el-drawer
      :visible.sync="isShow"
      direction="rtl"
      :show-close="false"
      :before-close="claerData"
      size="50%"
    >
      <el-row>
        <el-col :span="6">名称</el-col>
        <el-col :span="16">{{ skuinfo.skuName }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="6">描述</el-col>
        <el-col :span="16">{{ skuinfo.skuDesc }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="6">价格</el-col>
        <el-col :span="16">{{ skuinfo.price }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="6">平台属性</el-col>
        <el-col :span="16">
          <el-tag
            type="success"
            v-for="(attr, index) in skuinfo.skuAttrValueList"
            :key="attr.id"
            style="margin-right: 10px"
            >{{ attr.id }}-{{ attr.skuId }}</el-tag
          >
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">商品图片</el-col>
        <el-col :span="16">
          <el-carousel height="150px">
            <el-carousel-item v-for="(img,index) in skuinfo.skuImageList" :key="img.id">
              <img :src="img.imgUrl" style="width:200px;height: 200px;">
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "Sku",
  data() {
    return {
      page: 1,
      limit: 10,
      total: 0,
      record: null, //存储sku列表的数据
      skuinfo: {}, //sku信息
      isShow: false,
    };
  },
  mounted() {
    this.getSkuData();
  },
  methods: {
    //获取sku数据
    async getSkuData() {
      const { page, limit } = this;
      let result = await this.$API.sku.reqSkuDataList(page, limit);
      if (result.code === 200) {
        this.record = result.data.records;
        this.total = result.data.total;
      }
    },
    //当前页发生变化时
    handleCurrentChange(page) {
      this.page = page;
      this.getSkuData();
    },
    //每页数据数发送变化时
    handleSizeChange(limit) {
      this.limit = limit;
      this.getSkuData();
    },
    //上架
    async sale(row) {
      let result = await this.$API.sku.reqSale(row.id);
      if (result.code === 200) {
        row.isSale = 1;
        this.$message.success("上架成功");
      }
    },
    //下架
    async cancel(row) {
      let result = await this.$API.sku.reqCancel(row.id);
      if (result.code === 200) {
        row.isSale = 0;
        this.$message.success("下架成功");
      }
    },
    //编辑
    edit() {
      this.$message("正在开发中......");
    },
    //删除
    deleteSku() {
      this.$message.error("系统数据，不能删除!");
    },
    //查看sku的详情
    async getSkuInfo(sku) {
      //显示抽屉
      this.isShow = true;
      let result = await this.$API.sku.reqSkuById(sku.id);
      if (result.code === 200) {
        this.skuinfo = result.data;
      }
    },
    claerData(done){
        // this.skuinfo={}
        done()
    }
  },
};
</script>

<style>
.el-row {
  margin: 10px;
}
.el-row .el-col-6 {
  text-align: right;
  font-size: 16px;
  font-weight: bolder;
}
.el-row .el-col-16 {
  text-align: center;
}
</style>
